<template>
    <div class="login">
        <div class="box"></div>
    </div>
</template>

<style scoped>
/*
    过渡属性 all、none、property，多个用逗号隔开
    transition-property: property;
    过渡时间 单位为s|ms ,默认值为0，意味着没效
    transition-duration: 1s;
    过渡函数 默认值为ease
    ease，慢速开始，然后变快，然后慢速结束效果
    linear 匀速 
    ease-in，慢速开始，加速效果 z
    ease-out，慢速结束，减速效果
    ease-in-out，以慢速开始和结束，先加速后减速效果
    transition-timing-function: ease;
    过渡延时，多长时间开始执行过渡效果
    transition-delay: 1s;

    transition: 过渡属性 过渡时间 延迟时间 过度函数;
*/
.box {
    background: wheat;
    width: 200px;
    height: 200px;
    margin: 100px;
    /* transition-property: all;
    transition-duration: 4s;
    transition-duration: linear;
    transition-timing-function: 1s; */
    transition: all 2s 100ms linear;
}

.box:hover {
    transform: translateY(3px, 10px);
    box-shadow: 0px 0px 10px 10px #ccc;
    background: goldenrod;
}
</style>
